<template>
  <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" :close-on-click-modal="false"
             :close-on-press-escape="false" :before-close="handleClose" @close="$emit('update:visible',false)"
             top="100px">
    <el-form :model="editForm" label-width="120px" ref="editForm">
      <el-form-item label="用户头像:">
<!--        <uploadImg @getImgSrc="getImgSrc"></uploadImg>-->
        <imgUploadModle @getChildValue="getImgSrc" imgNumber="1" page="adminPic"
                        :picSrc="editForm.pic"></imgUploadModle>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="editForm.realname" auto-complete="off" placeholder="填写用户名"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="resetForm" size="small">取消</el-button>
      <el-button type="primary" @click.native="editSubmit" size="small">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>

import uploadImg from '@/components/dialog/uploadimg.vue'
import {mapGetters} from "vuex";

export default {
  components: {
    uploadImg
  },
  name: 'Dialog',
  props: ['visible'],
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      let this_ = this
      this.dialogVisible = this.visible
      if (this.visible) {
        this_.editForm.id = this.userInfo.id;
        this_.editForm.pic = this.userInfo.pic;
        this_.editForm.class_id = this.userInfo.class_id;
        this_.editForm.realname = this.userInfo.realname;
      }
    }
  },

  data() {
    return {
      stateVibilit: false,
      dialogVisible: false,
      editForm: {
        id: '',
        pic: '',
        realname: ''
      } // 编辑界面数据
    }
  },

  created() {
  },
  methods: {
    Inint() {

    },
    getImgSrc(option) {
      console.log('获取到的图片：', option)
      this.editForm.pic = option
    },
    handleClose() {
      this.dialogVisible = false
    },
    resetForm() {
      this.dialogVisible = false
    },
    getChildValue(option) {
      console.log('获取到的内容信息：', option)
    },
    editSubmit() {
      let that = this;
      if (!this.editForm.realname) {
        this.$message.error('用户名不能为空!')
        return
      }
      console.log('提交的参数：', this.editForm)
      this.$post(this.api.admin_user_edit, this.editForm).then((response) => {
        if (response.code === 0) {
          this.$emit('refreshFn',that.editForm)
          this.$message.success('编辑成功')
          this.dialogVisible = false
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
